<template>
  <div class="dashboard-detail-card" :class="{ 'no-scroll-box-parent': getPageScrollType(route.meta.templateId) }">
    <pageMenu>
      <template v-slot:left>
        <div class="router-boxs">
          <router-view></router-view>
        </div>
      </template>
      <template v-slot:right>
        <rightItem>
          <template v-slot:right-tab>
            <panelItemtab v-model="cruuent" />
          </template>
          <template v-slot:right-content>
            <div class="right-scroll" id="right-scroll-template-tab">
              <panelItem1 v-show="cruuent === 1" />
              <panelItem2 v-show="cruuent === 2" />
              <panelItem3 v-show="cruuent === 3" />
            </div>
          </template>
        </rightItem>
      </template>
    </pageMenu>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getPageScrollType } from '@/utils/minxin';
import { ref, reactive, computed, watch } from 'vue';
import panelItem1 from './components/panel/panelItem1.vue';
import panelItem2 from './components/panel/panelItem2.vue';
import panelItem3 from './components/panel/panelItem3.vue';
import panelItemtab from './components/panel/panelItemtab.vue';
import pageMenu from './components/pageMenu.vue';
import templateItem from './components/templateItem1/templateItem1.vue';
import rightItem from './components/rightItem.vue';
import { useRoute } from 'vue-router';

const cruuent = ref(1);
const noCsroll = ref(false);
const route = useRoute();
if (route.meta.templateId === 1997) {
  noCsroll.value = true;
}
</script>

<style lang="less" scoped>
.dashboard-detail-card {
  display: flex;
  width: 100vw;
  height: calc(100vh - 48px);
  // background: #f5f4f2;

  background: #fff;
}
.no-scroll-box-parent {
  height: auto;
  min-height: calc(100vh - 48px);
}
.router-boxs {
  width: 100%;
  height: 100%;
  min-width: 1180px;
}
.right-scroll {
  // padding: 0 20px;
  height: calc(100vh - 48px - 48px);

  overflow: scroll;
}
.right-scroll::-webkit-scrollbar {
  display: none;
}
:deep(.t-row) {
  padding: 0 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  // justify-content: space-between !important;
}
.right-scroll {
  :deep(.t-row) {
    justify-content: space-between;
  }
}
</style>
